<!--审核端首页-->
<template>
  <div class="check-dashboard">
    <div class="top-part">
      <div class="title">{{ realName }}</div>
      <div class="right">
        <el-input type="text" v-model="unitName" placeholder="输入搜索关键词">
          <svg-icon
            slot="suffix"
            icon-class="search"
            class="search-icon"
            @click="gotoEnterprise(unitName)"
          />
        </el-input>
        <el-dropdown>
          <div class="user">
            <img :src="avatar" alt />
            <span>{{ name }}</span>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="logout">登出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="content-part">
      <div class="left-part">
        <!-- <div class="select-part box">
          <div>当前展示数据</div>
          <div class="myselect" :class="{ open: openIcon }">
            <el-select
              class="autoWidth"
              v-model="supportUnitId"
              @change="changeSupportUnit"
              @visible-change="openTrue"
            >
              <template
                slot="prefix"
              >{{supportUnitId ? ( supportUnitDict.find(s => s.value === supportUnitId) || {}).label : '全区'}}</template>
              <el-option label="全区" value></el-option>
              <el-option
                v-for="(item, index) in supportUnitDict"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <svg-icon class-name="open-icon" icon-class="down-arrow" />
          </div>
        </div> -->
        <div class="chart-part">
          <div class="one-part box">
            <div class="title">数据总览</div>
            <div class="content-box">
              <div class="content-item">
                <span class="name">纳管单位</span>
                <span class="num" style="cursor: pointer;" @click="gotoEnterprise(false)">{{ ngData }}</span>
              </div>
              <div class="content-item">
                <span class="name">企业备案率</span>
                <span class="num unit">{{ recordRate }}</span>
              </div>
            </div>
            <div class="bar-list">
              <div class="bar-item" v-for="(item, index) in teskTypeList" :key="index">
                <div class="name">{{ item.name }}</div>
                <div class="bar">
                  <div
                    class="bar-inner"
                    :style="`width: ${
                      item.rate
                    }%;background: ${getBarInnerColor(item.rate)};`"
                  ></div>
                  <div class="bar-num unit">{{ item.rate }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="two-part">
            <div class="daily-part box">
              <div class="title">日常工作情况概览</div>
              <div class="text-box">
                <div class="text-item">
                  <div class="num">{{ teskData.total }}</div>
                  <div class="name">任务总数</div>
                </div>
                <div class="shu"></div>
                <div class="text-item">
                  <div class="num unit">{{ teskData.completeRate }}</div>
                  <div class="name">任务完成率</div>
                </div>
                <div class="text-item">
                  <div class="num">{{ teskData.adventCount }}</div>
                  <div class="name">临期数</div>
                </div>
                <div class="text-item">
                  <div class="num">{{ teskData.overdueCount }}</div>
                  <div class="name">逾期数</div>
                </div>
              </div>
              <div class="extra-text-box">
                <div class="text-item">
                  <span class="name">交互任务：</span>
                  <span class="num">{{ teskData.typeOneCount }}</span>
                </div>
                <div class="text-item">
                  <span class="name">通报任务：</span>
                  <span class="num">{{ teskData.typeTwoCount }}</span>
                </div>
                <div class="text-item">
                  <span class="name">专项任务：</span>
                  <span class="num">{{ teskData.typeThreeCount }}</span>
                </div>
              </div>
            </div>
            <div class="property-part box">
              <div class="title">资产备案情况</div>
              <div class="num-list">
                <div class="num-item" v-for="(item, index) in propertyList" :key="index">
                  <div class="icon-box">
                    <svg-icon class-name="svg-icon" :icon-class="item.iconClass" />
                    <div class="right">
                      <div class="name">{{ item.name }}</div>
                      <div class="num" @click="gotoProperty(item.path)">{{ item.total }}</div>
                    </div>
                  </div>
                  <div class="num-box">
                    <span class="name">备案率：</span>
                    <span
                      class="num unit"
                      @click="gotoProperty(item.hasPoliceOrgCodePath)"
                    >{{ item.recordRate }}</span>
                  </div>
                </div>
              </div>
              <div class="heng"></div>
              <div class="text-box">
                <div class="sp-item">
                  <svg-icon class-name="svg-icon" icon-class="xinxixitong" />
                  <div class="right">
                    <div class="name">信息系统</div>
                    <div class="num" @click="gotoProperty('/property/index?tabName=2')">{{ systemData.total }}</div>
                  </div>
                </div>
                <div class="text-item">
                  <div class="it">
                    <span class="name">一级数：</span>
                    <span class="num">{{ systemData.firstLevelCount }}</span>
                  </div>
                  <div class="it">
                    <span class="name">备案率：</span>
                    <span class="num unit">{{ systemData.recordRate }}</span>
                  </div>
                </div>
                <div class="text-item">
                  <div class="it">
                    <span class="name">二级数：</span>
                    <span class="num">{{ systemData.secondLevelCount }}</span>
                  </div>
                  <div class="it">
                    <span class="name">测评率：</span>
                    <span class="num unit">{{ systemData.testRate }}</span>
                  </div>
                </div>
                <div class="text-item">
                  <div class="it">
                    <span class="name">三级数：</span>
                    <span class="num">{{ systemData.thirdLevelCount }}</span>
                  </div>
                  <div class="it">
                    <span class="name">评估率：</span>
                    <span class="num unit">{{ systemData.evalRate }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-part box">
        <div class="title">支撑单位综合排名</div>
        <div class="rank-list">
          <el-row class="header">
            <el-col :offset="2" :span="12">支撑单位</el-col>
            <el-col :span="10">总评分</el-col>
            <!-- <el-col :span="5">备案率</el-col>
            <el-col :span="5">完成率</el-col> -->
          </el-row>
          <!-- <el-row class="sp-item">
            <el-col class="hexagon-col" :span="2">
              <div class="hexagon" :class="`color${5}`">
                {{ 5 }}
              </div>
            </el-col>
            <el-col :span="7"><span>杜堡</span></el-col>
            <el-col :span="5"><span class="num">95</span></el-col>
            <el-col :span="5"><span class="num unit">95</span></el-col>
            <el-col :span="5"><span class="num unit">95</span></el-col>
          </el-row>-->
          <el-row class="item" v-for="(item, index) in rankList" :key="index">
            <el-col class="hexagon-col" :span="2">
              <div class="hexagon" :class="`color${index}`">{{ index + 1 }}</div>
            </el-col>
            <el-col :span="12">
              <span>{{item.supportUnitName}}</span>
            </el-col>
            <el-col :span="10">
              <span class="num">{{item.finalScore}}</span>
            </el-col>
            <!-- <el-col :span="5">
              <span class="num unit">{{item.unitRecordRate}}</span>
            </el-col>
            <el-col :span="5">
              <span class="num unit">{{item.taskCompleteRate}}</span>
            </el-col> -->
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getEnterpriseRecordStat,
  getDomainStat,
  getAppStat,
  getAppletStat,
  getSystemStat,
  getNotifyStat,
  getCheckTaskStat,
  getSupportUnitRanking
} from '@/api/dashboard/index'
export default {
  data() {
    return {
      openIcon: false,
      supportUnitId: "",
      unitName: "",
      ngData: 0, // 纳管单位
      recordRate: 0, // 企业备案率
      teskTypeList: [
        {
          name: "企业域名备案率：",
          rate: 98
        },
        {
          name: "企业APP备案率：",
          rate: 69
        },
        {
          name: "企业小程序备案率：",
          rate: 69
        },
        {
          name: "企业系统备案率：",
          rate: 69
        },
        {
          name: "企业系统测评率：",
          rate: 69
        },
        {
          name: "企业系统评估率：",
          rate: 69
        },
        {
          name: "企业安全通报率：",
          rate: 69
        }
      ],
      teskData: {
        total: 0,
        completeRate: 0,
        adventCount: 0,
        overdueCount: 0,
        typeOneCount: 0,
        typeTwoCount: 0,
        typeThreeCount: 0
      }, // 日常工作情况概览数据
      systemData: {
        total: 0,
        firstLevelCount: 0,
        secondLevelCount: 0,
        thirdLevelCount: 0,
        recordRate: 0,
        testRate: 0,
        evalRate: 0
      }, // 信息系统数据
      propertyList: [
        {
          total: 69,
          recordRate: 69,
          iconClass: "yuming",
          name: "域名",
          path: "/property/index?tabName=1",
          hasPoliceOrgCodePath: "/property/index?tabName=1&hasPoliceOrgCode=1"
        },
        {
          total: 0,
          recordRate: 0,
          iconClass: "app",
          name: "APP",
          path: "/property/index?tabName=4",
          hasPoliceOrgCodePath: "/property/index?tabName=4&hasPoliceOrgCode=1"
        },
        {
          total: 0,
          recordRate: 0,
          iconClass: "xiaochengxu",
          name: "小程序",
          path: "/property/index?tabName=5",
          hasPoliceOrgCodePath: "/property/index?tabName=5&hasPoliceOrgCode=1"
        }
      ],
      rankList: [] // 支撑单位综合排名列表
    };
  },
  computed: {
    name() {
      return this.$store.getters.name;
    },
    realName() {
      return this.$store.getters.realName;
    },
    avatar() {
      return this.$store.getters.avatar;
    },
    supportUnitDict() {
      const dict = this.$store.getters.dict;
      const list = [];
      for (let value in dict.supportUnit) {
        list.push({
          label: dict.supportUnit[value],
          value
        });
      }
      return list;
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getEnterpriseRecordStat();
      this.getDomainStat();
      this.getAppStat();
      this.getAppletStat();
      this.getSystemStat();
      this.getNotifyStat();
      this.getCheckTaskStat();
      this.getSupportUnitRanking();
    },
    // 首页-企业备案统计
    getEnterpriseRecordStat() {
      getEnterpriseRecordStat({}).then(res => {
        this.ngData = res.data.total;
        this.recordRate = Math.round(res.data.recordRate * 100);
      });
    },
    // 域名数据
    getDomainStat() {
      getDomainStat({}).then(res => {
        const rate = Math.round(res.data.recordRate * 100);
        this.$set(this.teskTypeList[0], "rate", rate);
        this.$set(this.propertyList[0], "total", res.data.total);
        this.$set(this.propertyList[0], "recordRate", rate);
      });
    },
    // APP数据
    getAppStat() {
      getAppStat({}).then(res => {
        const rate = Math.round(res.data.recordRate * 100);
        this.$set(this.teskTypeList[1], "rate", rate);
        this.$set(this.propertyList[1], "total", res.data.total);
        this.$set(this.propertyList[1], "recordRate", rate);
      });
    },
    // 小程序数据
    getAppletStat() {
      getAppletStat({}).then(res => {
        const rate = Math.round(res.data.recordRate * 100);
        this.$set(this.teskTypeList[2], "rate", rate);
        this.$set(this.propertyList[2], "total", res.data.total);
        this.$set(this.propertyList[2], "recordRate", rate);
      });
    },
    // 信息系统数据
    getSystemStat() {
      getSystemStat({}).then(res => {
        // 备案率
        this.$set(
          this.teskTypeList[3],
          "rate",
          Math.round(res.data.recordRate * 100)
        );
        // 测评率
        this.$set(
          this.teskTypeList[4],
          "rate",
          Math.round(res.data.testRate * 100)
        );
        // 评估率
        this.$set(
          this.teskTypeList[5],
          "rate",
          Math.round(res.data.evalRate * 100)
        );
        this.systemData = {
          ...res.data,
          recordRate: Math.round(res.data.recordRate * 100),
          testRate: Math.round(res.data.testRate * 100),
          evalRate: Math.round(res.data.evalRate * 100)
        };
      });
    },
    // 安全通报率
    getNotifyStat() {
      getNotifyStat({}).then(res => {
        this.$set(this.teskTypeList[6], "rate", Math.round(res.data * 100));
      });
    },

    // 任务概览数据
    getCheckTaskStat() {
      getCheckTaskStat({}).then(res => {
        this.teskData = {
          ...res.data,
          completeRate: Math.round(res.data.completeRate * 100)
        };
      });
    },
    getSupportUnitRanking() {
      getSupportUnitRanking({}).then(res => {
        this.rankList = res.data;
      });
    },
    getBarInnerColor(rate) {
      if (rate < 25) {
        return "#E70819";
      } else if (rate < 50) {
        return "#FE9F01";
      } else if (rate < 75) {
        return "#1C4088";
      } else {
        return "#11B32E";
      }
    },
    openTrue(val) {
      this.openIcon = val;
    },
    changeSupportUnit() {
      this.getEnterpriseRecordStat();
      this.getDomainStat();
      this.getAppStat();
      this.getAppletStat();
      this.getSystemStat();
      this.getNotifyStat();
      this.getCheckTaskStat();
    },
    gotoProperty(path) {
      if (path) {
        this.$router.push({ path });
      }
    },
    gotoEnterprise(unitName) {
      let path = "/enterprise/index";
      if (unitName) {
        path = "/enterprise/index?unitName=" + unitName;
      }
      this.$router.push({ path });
    },
    async logout() {
      this.$confirm("确定退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$store.dispatch("LogOut").then(() => {
            location.href = "/login";
          });
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.check-dashboard {
  padding: 0.38rem 1.38rem 0;

  .top-part {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.9rem;

    .title {
      font-size: 0.53rem;
    }
    .right {
      display: flex;
      .el-input {
        width: 3.48rem;
        height: 0.6rem;
        font-size: 0.23rem;
        ::v-deep .el-input__inner {
          height: 0.6rem;
        }
        .search-icon {
          height: 0.6rem;
          font-size: 0.25rem;
          margin-right: 0.25rem;
        }
      }
      .user {
        display: flex;
        align-items: center;
        margin-left: 0.14rem;
        width: 1.5rem;
        height: 0.6rem;
        background: rgba(255, 255, 255, 0.6);
        box-shadow: 0px 0.07rem 1.2rem 0.6rem rgba(0, 0, 0, 0.05);
        border-radius: 0.04rem;
        font-size: 0.23rem;
        color: #000822;
        padding-left: 0.1rem;
        box-sizing: border-box;
        img {
          width: 0.45rem;
          height: 0.45rem;
          border-radius: 0.07rem;
          margin-right: 0.11rem;
        }
      }
    }
  }
  .content-part {
    display: flex;
    .left-part {
      flex: 1;
      margin-right: 0.3rem;
      .select-part {
        font-size: 0.3rem;
        color: rgba(0, 8, 34, 0.8);
        display: flex;
        align-items: center;
        padding: 0.28rem 0.4rem;
        .myselect {
          position: relative;
          .open-icon {
            position: absolute;
            right: 0.13rem;
            top: 0.11rem;
            font-size: 0.3rem;
            transition: all 0.5s;
          }
          &.open {
            .open-icon {
              transform: rotate(180deg);
            }
          }
          .autoWidth {
            min-width: 1.5rem;
            text-align: start;
            ::v-deep {
              .el-input__prefix {
                position: relative;
                left: 0px;
                box-sizing: border-box;
                padding: 0 30px;
                visibility: hidden;

                font-size: 0.38rem;
                color: #1c4088;
                border: none;
                background: transparent;
              }
              .el-input__suffix {
                display: none;
              }
              input {
                position: absolute;
              }
              .el-input__inner {
                font-size: 0.38rem;
                color: #1c4088;
                border: none;
                background: transparent;
                padding-left: 0.3rem;
              }
            }
          }
        }
      }
      .chart-part {
        // margin-top: 24px;
        display: flex;
        .one-part {
          width: 5.1rem;
          height: 9.45rem;
          margin-right: 0.3rem;
          .content-box {
            margin-top: 0.55rem;
            margin-bottom: 0.64rem;
            padding: 0 0.15rem;
            .content-item {
              width: 2.7rem;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 0.26rem;
              color: rgba(0, 8, 34, 0.8);
              .num {
                font-size: 0.45rem;
                color: #000822;
                &.unit::after {
                  content: "%";
                  font-size: 0.38rem;
                }
              }
              &:first-child {
                margin-bottom: 0.26rem;
              }
            }
          }
          .bar-list {
            padding: 0 0.15rem;
            .bar-item {
              width: 100%;
              margin-bottom: 0.19rem;
              .name {
                font-size: 0.26rem;
                color: #000822;
              }
              .bar {
                width: 3.7rem;
                display: flex;
                align-items: center;
                .bar-inner {
                  height: 0.07rem;
                  border-radius: 1px;
                  margin-right: 0.2rem;
                }
                .bar-num {
                  font-size: 0.3rem;
                  color: #000822;
                  &.unit::after {
                    content: "%";
                    font-size: 0.19rem;
                  }
                }
              }
            }
          }
        }
        .two-part {
          flex: 1;
          display: flex;
          flex-direction: column;
          .daily-part {
            margin-bottom: 0.3rem;
            .text-box {
              padding: 0 0.05rem;
              display: flex;
              justify-content: space-between;
              align-items: center;
              text-align: center;
              margin: 0.59rem 0;

              .shu {
                width: 0.8px;
                height: 0.9rem;
                background: rgba(0, 8, 34, 0.3);
              }

              .text-item {
                width: 1.31rem;
                &:first-child {
                  margin-right: 0.31rem;
                }
                .num {
                  font-size: 0.45rem;
                  color: #000822;

                  &.unit::after {
                    content: "%";
                    font-size: 0.3rem;
                  }
                }

                .name {
                  margin-top: 0.17rem;
                  font-size: 0.26rem;
                  color: rgba(0, 8, 34, 0.8);
                }
              }
            }
            .extra-text-box {
              padding: 0 0.17rem;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .text-item {
                font-size: 0.26rem;
                color: rgba(0, 8, 34, 0.6);
                .num {
                  font-size: 0.3rem;
                  color: #000822;
                }
              }
            }
          }
          .property-part {
            flex: 1;
            .num-list {
              margin-top: 0.63rem;
              padding: 0 0.19rem;
              display: flex;
              justify-content: space-between;
              .num-item {
                width: 1.73rem;

                .icon-box {
                  width: 100%;
                  display: flex;
                  justify-content: space-between;
                  margin-bottom: 0.3rem;

                  .svg-icon {
                    font-size: 0.45rem;
                    // margin-top: .15rem;
                  }

                  .right {
                    font-size: 0.26rem;
                    color: rgba(0, 8, 34, 0.8);
                    text-align: right;

                    .num {
                      font-size: 0.38rem;
                      color: #000822;
                      margin-top: 0.07rem;
                    }
                  }
                }

                .num-box {
                  width: 100%;
                  display: flex;
                  justify-content: space-between;
                  font-size: 0.23rem;
                  color: rgba(0, 8, 34, 0.6);
                  margin-top: 0.11rem;
                  .name {
                    width: 1.11rem;
                  }
                  .num {
                    cursor: pointer;
                    font-size: 0.26rem;
                    color: #000822;
                    &.unit::after {
                      content: "%";
                      font-size: 0.19rem;
                    }
                  }
                }
              }
            }
            .heng {
              width: 100%;
              height: 0.03rem;
              background: rgba(0, 8, 34, 0.3);
              margin: 0.41rem 0 0.46rem;
            }
            .text-box {
              padding: 0 0.19rem;
              display: flex;
              justify-content: space-between;
              .sp-item {
                width: 1.73rem;
                display: flex;
                justify-content: space-between;
                .svg-icon {
                  font-size: 0.45rem;
                  // margin-top: .15rem;
                }

                .right {
                  font-size: 0.26rem;
                  color: rgba(0, 8, 34, 0.8);
                  text-align: right;

                  .num {
                    font-size: 0.38rem;
                    color: #000822;
                    margin-top: 0.07rem;
                  }
                }
              }
              .text-item {
                .it {
                  &:first-child {
                    margin-bottom: 0.21rem;
                  }
                }
                font-size: 0.26rem;
                color: rgba(0, 8, 34, 0.6);
                .num {
                  color: #000822;
                  &.unit::after {
                    content: "%";
                    font-size: 0.19rem;
                  }
                }
              }
            }
          }
        }
      }
    }
    .right-part {
      width: 5.1rem;
      padding: 0.38rem 0.21rem 0 !important;
      .rank-list {
        margin-top: 0.57rem;
        .header {
          text-align: center;
          font-size: .23rem;
          color: rgba(0, 8, 34, 0.8);
          padding: 0 0.21rem;
        }
        .sp-item {
          line-height: 0.66rem;
          border: 2px solid #000000;
          font-size: 0.3rem;
          color: #000822;
          text-align: center;
          margin-top: 0.23rem;
          padding: 0 0.21rem;
          .hexagon-col {
            height: 0.66rem;
            display: flex;
            align-items: center;
          }
          .hexagon {
            width: 0.3rem;
            height: 0.3rem;
            background: rgba(0, 8, 34, 0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            clip-path: polygon(
              50% 0%,
              100% 25%,
              100% 75%,
              50% 100%,
              0% 75%,
              0% 25%
            );
            font-size: 0.19rem;
            color: #000822;
            line-height: 0.3rem;
            text-align: center;

            &.color0 {
              background: #e70819;
              color: #fff;
            }

            &.color1 {
              background: #fe9f01;
              color: #fff;
            }

            &.color2 {
              background: #1c4088;
              color: #fff;
            }
          }
          .num.unit::after {
            content: "%";
            font-size: 0.19rem;
          }
        }
        .item {
          line-height: 0.51rem;
          font-size: 0.29rem;
          color: #000822;
          text-align: center;
          margin-top: .3rem;
          padding: 0 0.21rem;
          .hexagon-col {
            height: 0.51rem;
            display: flex;
            align-items: center;
          }
          .hexagon {
            width: 0.3rem;
            height: 0.3rem;
            background: rgba(0, 8, 34, 0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            clip-path: polygon(
              50% 0%,
              100% 25%,
              100% 75%,
              50% 100%,
              0% 75%,
              0% 25%
            );
            font-size: 0.19rem;
            color: #000822;
            line-height: 0.3rem;
            text-align: center;

            &.color0 {
              background: #e70819;
              color: #fff;
            }

            &.color1 {
              background: #fe9f01;
              color: #fff;
            }

            &.color2 {
              background: #1c4088;
              color: #fff;
            }
          }
          .num.unit::after {
            content: "%";
            font-size: 0.19rem;
          }
        }
      }
    }
    .box {
      padding: 0.38rem;
      box-sizing: border-box;
      background: #fff;
      border-radius: 0.07rem;
      box-shadow: 0px 0.07rem 1.2rem 0.6rem rgba(0, 0, 0, 0.05);

      .title {
        font-size: 0.38rem;
        color: #000822;
        display: flex;
        align-items: center;

        &::before {
          content: "";
          display: block;
          width: 0.04rem;
          height: 0.3rem;
          background: #1c4088;
          margin-right: 0.15rem;
        }
      }
    }
  }
}
</style>